<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" width="1100px" append-to-body>
        <el-form ref="form" :model="model" :rules="rules" inline label-width="170px" label-suffix=":" class="form-class">
            <el-form-item label="店铺" prop="currency">
                <el-select v-model="model.shop_name" placeholder="请选择店铺">
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="币种" prop="currency">
                <el-input v-model.trim="model.currency" placeholder="请输入币种" clearable></el-input>
            </el-form-item>
            <el-form-item label="批量新增数量" prop="num">
                <el-input v-model.trim="model.num" placeholder="请输入批量新增数量" clearable></el-input>
            </el-form-item>
            <el-form-item label="代金券金额" prop="balance">
                <el-input v-model.trim="model.balance" placeholder="请输入代金券金额" clearable></el-input>
            </el-form-item>
            <el-form-item label="代金券初始值" prop="initial_value">
                <el-input v-model.trim="model.initial_value" placeholder="请输入代金券初始值" clearable></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="submit">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </div>
    </el-dialog>
</template>

<script>
import {GiftcardAdd } from '@/api/order'
export default {
    name: 'DetailDialog',
    props: {
        value: {
            type: Boolean,
            default: false,
            required: true,
        },
        params: {
            type: Object,
            default: () => {},
        },
        type: {
            type: String,
            default: '',
        },
    },
    data() {
        return {
            model: { 
                shop_name: 'SheCurve',
                currency: 'USD',
                num: 10,
                balance: '0.00',
                initial_value: '0.00',
            },
            options: [{
                    value: 'SheCurve',
                    label: 'SheCurve'
                }, {
                    value: 'woobilly',
                    label: 'woobilly'
                }, {
                    value: 'LilyLove',
                    label: 'LilyLove'
                },{
                    value: 'Kisslove',
                    label: 'Kisslove'
                },
            ],
            rules: {
                
            },
        }
    },
    computed: {
        title() {
            return `${this.type == 'edit' ? '编辑' : '新增'}代金券`
        },
        dialogVisible: {
            get() {
                return this.value
            },
            set(val) {
                this.$emit('input', val)
            },
        },
    },
    watch: {
        params: {
            handler(val) {
                if (val.id) {
                    // this.getDetail()
                }
            },
            immediate: true,
            deep: true,
        },
    },
    async mounted() {
        
    },
    methods: {
        getDetail() {
        },
        submit() {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    return
                }
                const params = { ...this.model }
                console.log('params',params);
                GiftcardAdd(params)
                    .then(res => {
                        this.$message.success(res.msg)
                        this.dialogVisible = false
                        this.$emit('success')
                    })
                    .finally(() => {
                    })
            })
        },
        cancel() {
            this.dialogVisible = false
        },
    },
}
</script>